<template>
  <PageWrapper :sidebarWidth="230" ref="contentElRef">
    <template #sidebar>
      <MyTreeSelect 
        v-bind="treeProps" 
        @select="onTreeSelect" 
        ref="dataGroupTreeRef"
        @add-child="handleAddGroup"
        @edit="handleEditGroup"
      />
    </template>
    <slot></slot>
    <MyDataGroupList 
      @register="registerGroupList" 
      @success="handleReload" 
      :bizType="bizType"
    />
    <MyDataGroupForm @register="registerDataGroupForm" @success="handleReload"/>
  </PageWrapper>
</template>
<script lang="ts" name="data-group-wrapper" setup>
import { ref, nextTick, watch } from 'vue';
import { PageWrapper } from '/@/components/Page';
import { MyTreeSelect, MyTreeProps } from '/@/components/BizTreeSelect';
import { useDrawer } from '/@/components/Drawer';
import { useI18n } from '/@/hooks/web/useI18n';
import { useModal } from '/@/components/Modal';
import { useGlobSetting } from '/@/hooks/setting';
import { useMessage } from '/@/hooks/web/useMessage';
import { Icon } from '/@/components/Icon';
import { isFunction } from '/@/utils'
import { listDataGroupTree } from '/@/api/infra/dataGroup'
import { MyDataGroupForm, MyDataGroupList } from '/@/components/BizDataGroup/index';

const { t } = useI18n('');
const { createMessage } = useMessage();
const glob = useGlobSetting();
const [registerGroupList, { openDrawer: openGroupList }] = useDrawer();
const [registerDataGroupForm, { openModal: openDataGroupForm }] = useModal();
const emtis = defineEmits(['reload', 'change'])

const props = defineProps({
  bizType: { type: Number },
  groupId: { type: String },
  groupCodeRequired:  { type: Boolean, default: false },
  isTree:  { type: Boolean, default: true },
  title: { type: String, default: '数据组' },
  groupType: { type: String },
  deleteApi: { type: Function as PropType<(arg?: any, successCallback?: Function) => any> },
  batchDeleteApi: { type: Function as PropType<(arg?: any, successCallback?: Function) => any> },
  saveOrUpdateApi: { type: Function as PropType<(arg?: any, isUpdate?: boolean) => any> },
})

// 当前选中的分组
const groupId = ref()

const dataGroupTreeRef = ref<any>()
const deleteApi = async (arg : any, successCallback: Function) => {
  console.log('arg', arg)
  isFunction(props.deleteApi) && await props.deleteApi({ ...arg }, (params) => {
    successCallback(params)
    dataGroupTreeRef.value.reload()
  })
}

const listDataGroupTreeApi = async (arg?: any) => {
  if (!isFunction(listDataGroupTree)) {
    return
  }
  const data = await listDataGroupTree({ ...arg })
  const nodeFirst = { 
    name: '全部', id: 'all',
    showAddSub: false, 
    showEdit: false, 
    showDelete: false
  }
  return [ nodeFirst , ...data ]
}

const treeProps = ref<MyTreeProps>({
  api: listDataGroupTreeApi,
  searchField: 'name',
  enableAddChird: true,
  enableDelete: true,
  enableEdit: true,
  deleteApi,
  params: {
    groupType: props.groupType,
    bizType: props.bizType
  }
})

// 左侧树选择后触发
const onTreeSelect = (data) => {
  if (data === 'all') {
    emtis('change', null)
    return
  }
  console.log('onTreeSelect', data);
  groupId.value = data
  emtis('change', data)
}

const handleAddGroup = (node) => {
  openDataGroupForm(true, { 
    isUpdate: false,
    ...props,
    deleteApi,
    record: { parentId: node?.id }}
  )
}

const handleEditGroup = (node) => {
  openDataGroupForm(true, { 
    isUpdate: true, 
    ...props,
    deleteApi,
    record: { 
      ...node, 
      name: node.title
    }
  })
}

const handleOpenGroupList = () => {
  console.log('props', props)
  openGroupList(true, {
    title: props.title,
    width: 800,
    groupCodeRequired: props.groupCodeRequired,
    deleteApi,
    batchDeleteApi: props.batchDeleteApi,
    saveOrUpdateApi: props.saveOrUpdateApi
  })
}

const handleReload = () => {
  dataGroupTreeRef.value.reload()
  emtis('reload')
}

defineExpose({
  handleOpenGroupList,
  handleAddGroup
})
</script>
